<template>
	<view class="container">
		<view class="header">
			<navSearchBar title="访问记录" background=""></navSearchBar>
			<!-- <view class="info">
				<view class="info-title">{{customerInfo.name}}</view>
				<view class="info-content flex-col-between">
					<view class="">{{customerInfo.level.text}}</view>
					<view class="">{{customerInfo.scale.text}}</view>
				</view>
				<view class="info-content flex-col-between">
					<view class="">{{customerInfo.industry_info}}</view>
					<view class="">信息完成度{{customerInfo.integrity_score.text}}</view>
				</view>
			</view> -->
		</view>
		<view class="content" style="margin-top: 10rpx;">
			<view class="time-select flex-row-center">
				<view class="time-select-item flex-row-center">
					<view class="time-select-label">访问时长: </view>
					<view class="time-select-text" @click="durationShow = true">{{duration.label ||"请选择"}}</view>
					<image src="/static/down.png" mode=""  @click="durationShow = true"></image>
				</view>
				<view class="time-select-item flex-row-center">
					<view class="time-select-label">访问次数: </view>
					<view class="time-select-text" @click="timesShow= true">{{times.label || "请选择"}}</view>
					<image src="/static/down.png" mode="" @click="timesShow= true"></image>
				</view>
				
			</view>
			<scroll-view class="scroll" scroll-y @scrolltolower="loadMore">
				<view class="list">
					<view class="list-item" v-for="item in list" :key="item.id">
						<view class="visit-title">{{item.role_id==1?item.user.nickname:item.contact.name}} - {{item.role_id==1?item.user.organization.title:item.contact.client.name}}</view>
						<view class="visit-message flex-col-between">
							<view class="message-left">
								浏览了<text>{{item.module}}</text>
							</view>
							
							<view class="message-right">{{item.create_time}}（{{item.create_time_text}})</view>
						</view>
						<view class="visit-module flex-row-center" @click="handleView(item.path)">
							<view class="module-img flex-col-center">
								<!-- <text class="tn-icon-align"></text> -->
								<image :src="item.picture"></image>
							</view>
							<view class="module-content" >
								<view class="module-name">{{item.module}}</view>
								<view class="module-button" >点击查看</view>
							</view>
							<image class="module-icon" src="../../static/personal/right.png" mode=""></image>
						</view>
						<view class="visit-time flex-row-center">
							<view class="visit-time-item">
								访问时长: <text>{{item.duration_text}}</text>
							</view>
							<view class="visit-time-item">
								访问次数: <text>{{item.total}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</scroll-view>
		</view>
		<tn-select v-model="durationShow" mode="single" :list="durationList" labelName="text" valueName="value" :searchShow="false" @confirm="confirmDuration"></tn-select>
		<tn-select v-model="timesShow" mode="single" :list="timesList" labelName="text" valueName="value" :searchShow="false" @confirm="confirmTimes"></tn-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId:"",
				recordType:"",
				customerInfo:{},
				duration:{},
				durationShow:false,
				durationList:[],
				times:{},
				timesShow:false,
				timesList:[],
				list:[],
				page:1,
				pageSize:10,
				total:0
			};
		},
		onLoad() {
			const {id,customer,type} = this.$Route.query
			this.detailId = id
			this.recordType = type
			console.log(this.recordType,"this.recordType")
			// this.getCustomer(customer)
			this.getDetail(this.detailId)
			this.getDuration()
			this.getTimes()
		},
		methods:{
			async getCustomer(id) {
				let res = await this.$api.customerDetail(id)
				this.customerInfo = res.data.data
				console.log(this.customerInfo,"res")
			},
			async getDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let res 
				let par = {
					category_id:this.detailId,
					page:this.page,
					browse_duration:this.duration.value || "",
					browse_total:this.times.value || "",
					limit:this.pageSize
				}
				if(this.recordType == 1) {
					res = await this.$api.visitDetail(par)
				} else {//访问记录用全部接口
					res = await this.$api.visitDetail(par)
					//this.$api.myVisitDetail(par)
				}
				console.log(res,"res")
				if(res.data.status) {
					uni.hideLoading();
					let list = res.data.data.data || [];
					this.list = this.list.concat(list);
					this.total = res.data.data.total;
				}
			},
			loadMore() {
				if(this.total <= this.page * this.pageSize) return
				this.page++
				this.getDetail()
			},
			async getDuration() {
				let res = await this.$api.visitDuration()
				this.durationList = res.data.data
			},
			async getTimes() {
				let res = await this.$api.visitTimes()
				this.timesList = res.data.data
			},
			confirmDuration(e) {
				console.log(e,"e")
				this.duration = e[0];
				this.page = 1;
				this.list = [];
				this.getDetail()
			},
			confirmTimes(e){
				this.times = e[0];
				this.page = 1;
				this.list = [];
				this.getDetail()
			},
			handleView(path) {//只会有几大模块的详情页和首页
				// this.$Router.push({path:'/pages/product/detail?id=2',query:{id:1}})
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: hidden;
	}
	.header {
		background: linear-gradient( 180deg, #E9ECFF 0%, #FFFFFF 100%); 
	}

	.info {
		padding: 30rpx 40rpx;
		.info-title {
			font-size: 32rpx;
			font-weight: $Semibold;
			color: #525252;
			margin-bottom: 30rpx;
		}
		.info-content {
			font-size: $text-size;
			margin-bottom: 30rpx;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.10);
		overflow: hidden;
	}
	.time-select {
		padding: 30rpx 40rpx;
		border-bottom: 2rpx solid #EFEFEF;
		& :first-child {
			margin-right: 60rpx;
		}
		.time-select-label {
			 font-size: 28rpx;
			 color: #6F6F6F;
			 margin-right: 20rpx;
		}
		.time-select-text {
			font-size: 28rpx;
			color: #3B54DA;
			margin-right: 20rpx;
		}
		image {
			width: 22rpx;
			height: 12rpx;
		}
	}
	.scroll {
		flex: 1;
		height: 100%;
	}
	.list {
		padding:0 40rpx;
		padding-bottom: 140rpx;
		.list-item {
			padding: 30rpx 0 20rpx;
			border-bottom: 2rpx solid #EFEFEF;
		}
		.visit-title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.visit-message {
			margin-bottom: 20rpx;
			.message-left {
				font-size: 28rpx;
				color: #CFD1D5;
				text {
					color: #3B54DA;
					margin-left: 15rpx;
				}
			}
			.message-right {
				font-size: $text-size;
				color: #CFD1D5;
			}
		}
		.visit-module {
			background: #F4F4F4;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			.module-img {
				
				// background: #3B54DA;
				
				margin-right: 20rpx;
				image{
					width: 168rpx;
					height: 100rpx;
					border-radius: 14rpx;
				}
				.tn-icon-align {
					width: 40rpx;
					color: #FFFFFF;
				}
			}
			.module-content {
				display: flex;
				flex-direction: column;
				.module-name {
					font-size: 28rpx;
					margin-bottom: 22rpx;
				}
				.module-button {
					font-size: $text-size;
					color: #CFD1D5;
				}
			}
			.module-icon {
				width: 10rpx;
				height: 20rpx;
				margin-left: auto;
			}
		}
		.visit-time {
			.visit-time-item {
				font-size: $text-size;
				text {
					margin-left: 14rpx;
				}
			}
			.visit-time-item:first-of-type {
				margin-right: 60rpx;
			}
		}
	}
</style>